<template>
  <div>
    <!-- 年度开工率 -->
    <Echart
      id="pieChart1"
      :options="options"
      height="120px"
      width="100%"
    />
    <div style="height: 20px;" />
  </div>
</template>

<script>
	import Echart from '@/common/echart'
	export default {
		components: {
			Echart,
		},
		props: {
			dateStr: {
				type: String,
				default: ""
			},
		},
		watch: {
			dateStr: {
				handler() {
					this.getYdPie()
				}
			}
		},
		data() {
			return {
				url: {
					yaoTotal: '/api/report/analysis/yaoTotal',
				},
				options: {},
				options2: {},
			};
		},
		mounted() {
			this.getYdPie()
		},
		methods: {
			getYdPie() {
				var _this = this
				this.$ajax({
					method: 'get',
					url: this.url.yaoTotal,
					params: {
						dateStr: this.dateStr
					}
				}).then(function(resultData) {
					var resData = resultData.data.data
					var jy_pac_total_day = (+resData.day.total_jy_pac).toFixed(1)
					var jy_pam1_total_day = (+resData.day.total_jy_pam1).toFixed(1)
					var jy_pam2_total_day = (+resData.day.total_jy_pam2).toFixed(1)
					var jy_ty_total_day = (+resData.day.total_jy_ty).toFixed(1)
					var jy_cn_total_day = (+resData.day.total_jy_cn).toFixed(1)
					var data1 = [{
							name: "PAC",
							value: jy_pac_total_day
						}, {
							name: "气浮PAM",
							value: jy_pam1_total_day
						},
						{
							name: "脱水机PAM",
							value: jy_pam2_total_day
						},
						{
							name: "碳源",
							value: jy_ty_total_day
						},
						{
							name: "次钠",
							value: jy_cn_total_day
						}
					]
					_this.options = {
						tooltip: {
							trigger: 'item'
						},
						series: [{
							name: '加药',
							type: 'pie',
							radius: ['40%', '70%'], // 设置环形的内半径和外半径
							avoidLabelOverlap: false,
							label: {
								show: true,
								position: 'outside',
								formatter: '{b}', // 显示名称和数值
								color: '#fff',
								fontSize: 12
							},
							labelLine: {
								show: true,
								lineStyle: {
									color: '#fff'
								}
							},
							data: data1,
							itemStyle: {

								borderColor: '#001946', // 边框颜色
								borderWidth: 2
							}
						}],
						graphic: {
							type: 'text', // 显示文本
							left: 'center',
							top: 'center',
							style: {
								text: '加药', // 环中心显示的标题内容
								fill: '#fff', // 文字颜色
								fontSize: 16, // 字体大小
								fontWeight: 'bold'
							}
						}
					}

				})
			}
		}
	}
</script>
